<template>
  <pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div class="index" v-cloak>
      <div class="header acea-row row-center-wrapper">
        <router-link :to="'/search'" class="search acea-row row-middle">
          <span class="iconfont icon-xiazai5"></span>搜索商品
        </router-link>
      </div>
      <div class="slider-banner banner">
        <swiper :options="swiperOption" v-if="banner.length > 0">
          <swiper-slide v-for="(item, index) in banner" :key="index">
            <router-link
              :to="item.url ? item.url : ''"
              class="search acea-row row-middle"
            >
              <img :src="item.pic" />
            </router-link>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <div class="nav acea-row">
        <router-link
          :to="item.url ? item.url : ''"
          class="item"
          v-for="(item, index) in menus"
          :key="index"
        >
          <div class="pictrue">
            <img :src="item.pic" />
          </div>
          <div>{{ item.name }}</div>
        </router-link>
      </div>
      <div>
        <notice-bar
          left-icon="volume-o"
          scrollable="true"
          color="red"
          mode="link"
          :text="singNew.info"
          @click="goUrl(singNew)"
        />
      </div>
      <div class="hotList" v-if="likeInfo.length > 0">
        <div class="hot-bg">
          <div class="title acea-row row-between-wrapper">
            <div class="text line1">
              <span class="iconfont icon-remen"></span>
              <span class="label">热门榜单</span>
            </div>
            <router-link :to="{ path: '/hot_new_goods/' + 2 }" class="more">
              更多
              <span class="iconfont icon-jiantou"></span>
            </router-link>
          </div>
        </div>
        <div class="list acea-row row-middle">
          <router-link
            :to="{ path: '/detail/' + item.id }"
            class="item"
            v-for="(item, index) in likeInfo.slice(0, 3)"
            :key="index"
          >
            <div class="pictrue">
              <img :src="item.image" />
            </div>
            <div class="name line1">{{ item.storeName }}</div>
            <div class="money font-color-red">
              ￥
              <span class="num">{{ item.price }}</span>
            </div>
          </router-link>
        </div>
      </div>
      <div class="wrapper" v-if="bastList.length > 0">
        <div class="title acea-row row-between-wrapper">
          <div class="text">
            <div class="name line1">
              <span class="iconfont icon-jingpintuijian"></span>
              精品推荐
            </div>
          </div>
          <router-link :to="{ path: '/hot_new_goods/' + 1 }" class="more">
            更多
            <span class="iconfont icon-jiantou"></span>
          </router-link>
        </div>
        <Good-list :good-list="bastList" :is-sort="false"></Good-list>
      </div>
      <div class="wrapper" v-if="firstList.length > 0">
        <div class="title acea-row row-between-wrapper">
          <div class="text">
            <div class="name line1">
              <span class="iconfont icon-xinpin"></span>
              首发新品
            </div>
          </div>
          <router-link :to="{ path: '/hot_new_goods/' + 3 }" class="more">
            更多
            <span class="iconfont icon-jiantou"></span>
          </router-link>
        </div>
        <div class="newProducts">
          <swiper class="swiper-wrapper" :options="swiperProducts">
            <swiper-slide
              class="swiper-slide"
              v-for="(item, index) in firstList"
              :key="index"
            >
              <router-link :to="{ path: '/detail/' + item.id }">
                <div class="img-box">
                  <img :src="item.image" />
                </div>
                <div class="pro-info line1">{{ item.storeName }}</div>
                <div class="money font-color-red">￥{{ item.price }}</div>
              </router-link>
            </swiper-slide>
          </swiper>
        </div>
      </div>
      <div class="wrapper" v-if="benefit.length > 0">
        <div class="title acea-row row-between-wrapper">
          <div class="text">
            <div class="name line1 new-name">
              <span class="iconfont icon-shoucang"></span>
              <span class="txt">猜你喜欢</span>
            </div>
          </div>
        </div>
      </div>
      <Promotion-good :benefit="benefit"></Promotion-good>
      <div style="height:1.2rem;"></div>
      <div>
        <iframe
          v-if="mapKey && !isWeixin"
          ref="geoPage"
          width="0"
          height="0"
          frameborder="0"
          scrolling="no"
          :src="
            'https://apis.map.qq.com/tools/geolocation?key=' +
              mapKey +
              '&referer=myapp'
          "
        >
        </iframe>
      </div>
    </div>
  </pull-refresh>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "@assets/css/swiper.min.css";
import GoodList from "@components/GoodList";
import PromotionGood from "@components/PromotionGood";
import { getHomeData, getShare } from "@api/public";
import { openShareAll, wxShowLocation } from "@libs/wechat";
import { isWeixin } from "@utils/index";
import cookie from "@utils/store/cookie";
import { PullRefresh, NoticeBar, Toast } from "vant";
const LONGITUDE = "user_longitude";
const LATITUDE = "user_latitude";
const MAPKEY = "mapKey";

export default {
  name: "Index",
  components: {
    swiper,
    swiperSlide,
    GoodList,
    PromotionGood,
    PullRefresh,
    NoticeBar,
    Toast
  },
  props: {},
  data: function() {
    return {
      count: 0,
      isLoading: false,
      showCoupon: false,
      logoUrl: "",
      banner: [],
      menus: [],
      roll: [],
      bastList: [],
      firstList: [],
      info: {
        fastList: [],
        bastBanner: [],
        bastList: []
      },
      likeInfo: [],
      lovely: [],
      benefit: [],
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        autoplay: {
          disableOnInteraction: false,
          delay: 2000
        },
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true
      },
      swiperRoll: {
        direction: "vertical",
        autoplay: {
          disableOnInteraction: false,
          delay: 2000
        },
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true
      },
      swiperScroll: {
        freeMode: true,
        freeModeMomentum: false,
        slidesPerView: "auto",
        observer: true,
        observeParents: true
      },
      swiperBoutique: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        autoplay: {
          disableOnInteraction: false,
          delay: 2000
        },
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true
      },
      swiperProducts: {
        freeMode: true,
        freeModeMomentum: false,
        slidesPerView: "auto",
        observer: true,
        observeParents: true
      }
    };
  },
  computed: {
    singNew() {
      return this.roll.length > 0 ? this.roll[0] : "你还没添加通知哦！";
    }
  },
  mounted: function() {
    this.getHome();
  },
  watch: {
    menus(newVal, oldVal) {
      if (newVal.length == 0) {
        this.getHome(); //此处公众号有时候不会加载数据的问题，老会员特别注意下菜单不能为空，不然会一直加载
      }
    }
  },
  methods: {
    goUrl(e) {
      if (e && e.url) return this.$router.push({ path: e.url });
    },
    onRefresh() {
      this.getHome();
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        this.count++;
      }, 500);
    },
    getHome() {
      let that = this;
      getHomeData().then(res => {
        that.mapKey = res.data.mapKey;
        cookie.set(MAPKEY, that.mapKey);
        that.logoUrl = res.data.logoUrl;
        that.$set(that, "banner", res.data.banner);
        that.$set(that, "menus", res.data.menus);
        that.$set(that, "roll", res.data.roll);
        that.$set(that, "info", res.data.info);
        that.$set(that, "firstList", res.data.firstList);
        that.$set(that, "bastList", res.data.bastList);
        that.$set(that, "likeInfo", res.data.likeInfo);
        that.$set(that, "lovely", res.data.lovely);
        that.$set(that, "benefit", res.data.benefit);
        
        that.setOpenShare();
        if (!cookie.get(LATITUDE) && !cookie.get(LONGITUDE))
          this.getWXLocation();
      });
    },
    getWXLocation() {
      if (isWeixin()) {
        wxShowLocation();
      } else {
        if (!this.mapKey)
          return this.$dialog.error(
            "暂无法使用地图定位功能，请配置您的腾讯地图key"
          );
        let loc;
        window.addEventListener(
          "message",
          function(event) {
            loc = event.data;
            console.log("location", loc);
            if (loc && loc.module == "geolocation") {
              cookie.set(LATITUDE, loc.lat);
              cookie.set(LONGITUDE, loc.lng);
            } else {
              cookie.remove(LATITUDE);
              cookie.remove(LONGITUDE);
              console.log("定位失败");
            }
          },
          false
        );
      }
    },
    setOpenShare: function() {
      if (isWeixin()) {
        getShare().then(res => {
          var data = res.data.data;
          var configAppMessage = {
            desc: data.synopsis,
            title: data.title,
            link: location.href,
            imgUrl: data.img
          };
          openShareAll(configAppMessage);
        });
      }
    }
  }
};
</script>
<style scoped>
.index {
  background-color: #fff;
}
.text .new-name {
  text-align: center !important;
  vertical-align: top;
}
.text .name .icon-shoucang {
  color: #ea3526 !important;
  margin-right: 0.1rem;
}
.text .name .icon-xinpin {
  color: blue !important;
}
.text .name .icon-jingpintuijian {
  color: blue !important;
}
</style>
